<template>
    <div>
        <div>
            <el-row class="panel-group" :gutter="40">
                <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
                    <div class='card-panel'>
                        <div class="card-panel-icon-wrapper icon-people">
                            <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
                        </div>
                        <div class="card-panel-description">
                            <div class="border-bottom"><span class="border-right">需求数（人）</span></div>
                            <div><span class="border-right">{{dataBean.must_num}}</span></div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
                    <div class='card-panel'>
                        <div class="card-panel-icon-wrapper icon-people">
                            <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
                        </div>
                        <div class="card-panel-description">
                            <div class="border-bottom"><span class="border-right">登记数（人）</span></div>
                            <div><span class="border-right">{{dataBean.dengji_num}}</span></div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
                    <div class='card-panel'>
                        <div class="card-panel-icon-wrapper icon-people">
                            <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
                        </div>
                        <div class="card-panel-description">
                            <div class="border-bottom"><span class="border-right">录用数（人）</span></div>
                            <div><span class="border-right">{{dataBean.luyong_num}}</span></div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
                    <div class='card-panel'>
                        <div class="card-panel-icon-wrapper icon-people">
                            <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
                        </div>
                        <div class="card-panel-description">
                            <div class="border-bottom"><span class="border-right">入职数（人）</span></div>
                            <div><span class="border-right">{{dataBean.ruzhi_num}}</span></div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
                    <div class='card-panel'>
                        <div class="card-panel-icon-wrapper icon-people">
                            <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
                        </div>
                        <div class="card-panel-description">
                            <div class="border-bottom"><span class="border-right">离职数（人）</span></div>
                            <div><span class="border-right">{{dataBean.lizhi_num}}</span></div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="8" :lg="4" class="card-panel-col">
                    <div class='card-panel'>
                        <div class="card-panel-icon-wrapper icon-people">
                            <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
                        </div>
                        <div class="card-panel-description">
                            <div class="border-bottom"><span class="border-right">空缺数（人）</span></div>
                            <div><span class="border-right">{{dataBean.kongque_num}}</span></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-row v-loading="DataLoading" element-loading-text="给我一点时间">
            <div style="width:100%;height:300px;margin:20px 0" id="linechart"></div>
        </el-row>
        <div class="filter-container justify-between">
            <div>
                <el-switch v-model="multi" inactive-text="批量操作"></el-switch>
                <template v-if="multi">
                    <el-button size="mini" type="info" @click="downloadExcel()">导出数据</el-button>
                </template>
            </div>
            <div>
                <el-select @change='doSearch' style="width: 150px" class="filter-item" v-model="listQuery.dept_id"
                           placeholder="全部部门">
                    <el-option label="全部部门" value=""></el-option>
                    <el-option v-for="(item,index) in dept_list" :key="item.id" :label="item.name"
                               :value="item.id"></el-option>
                </el-select>
                <el-select @change='doSearch' style="width: 150px" class="filter-item" v-model="listQuery.job_id"
                           placeholder="全部岗位">
                    <el-option label="全部岗位" value=""></el-option>
                    <el-option v-for="(item,index) in job_list" :key="item.id" :label="item.name"
                               :value="item.id"></el-option>
                </el-select>
                <el-date-picker class="filter-item" style="width:280px;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="listQuery.start_time"
                                type="datetime"
                                placeholder="选择日期时间">
                </el-date-picker>
                <el-date-picker  class="filter-item" style="width:280px;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                 v-model="listQuery.end_time"
                                 type="datetime"
                                 placeholder="选择日期时间">
                </el-date-picker>
                <el-input @keyup.enter.native="doSearch" style="width: 200px;" class="filter-item" placeholder="输入名称搜索"
                          v-model="listQuery.keyword">
                </el-input>
                <el-button  class="filter-item" type="primary" v-waves icon="el-icon-search" @click="doSearch">搜索
                </el-button>

            </div>
        </div>
        <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="给我一点时间"
                  border fit highlight-current-row style="width: 100%" @selection-change="onSelectionChange"
                  height="500">
            <el-table-column v-if='multi' type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column align="left" label="单位">
                <template slot-scope="scope">
                    <span>{{scope.row.dept_name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="岗位">
                <template slot-scope="scope">
                    <span>{{scope.row.job_name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="需求数">
                <template slot-scope="scope">
                    <span>{{scope.row.must_num }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="登记数">
                <template slot-scope="scope">
                    <span>{{scope.row.dengji_num }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="录用数">
                <template slot-scope="scope">
                    <span>{{scope.row.luyong_num }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="入职数">
                <template slot-scope="scope">
                    <span>{{scope.row.ruzhi_num }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="离职数">
                <template slot-scope="scope">
                    <span>{{scope.row.lizhi_num}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="空缺数">
                <template slot-scope="scope">
                    <span>{{scope.row.kongQueNum}}</span>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="onSizeChange" @current-change="onCurrentChange"
                           :current-page="listQuery.pageNumber" :page-sizes="[12,50,100,10000]"
                           :page-size="listQuery.pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
	import Vue from 'vue'
	import waves from '@/directive/waves' // 水波纹指令
	import API from '@/api'
	import Http from '@/http'
	import Store from '@/store'
	import Msg from '@/utils/msg'
	import Utils from '@/utils/common'
	import DateUtil from '@/utils/dateutil'
	import _ from 'underscore'
	import Qiniu from '@/utils/qiniu'
	import echarts from 'echarts'

	require('echarts/theme/macarons') // echarts theme

	export default {
		directives: {waves},
		data() {
			return {
				multi:true,
				multipleSelection: [],
				dealing: false,
				list: [],
				total: 0,
				listLoading: true,
				listQuery: {
					pageNumber: 1,
					pageSize: 12,
					keyword:'',
					dept_id: '',//(非必要参数)
					job_id: '',
					start_time: '', //开始时间(非必要)
					end_time: '',
				},
				dept_list: [],
				job_list: [],
				company:Store.getters.user.company,
				dataBean: {},
				chart: null,
				DataLoading: true,
			}
		},
		filters: {},
		components: {},
		created() {
			this.loadList()
			this.loadAllData()
			this.loadMonthData()
			this.loadDeptList()
			this.loadJobList()
		},
		mounted() {
			this.initChart()
			if (this.autoResize) {
				this.__resizeHanlder = Utils.debounce(() => {
					if (this.chart) {
						this.chart.resize()
					}
				}, 100)
				window.addEventListener('resize', this.__resizeHanlder)
			}
		},
		computed: {},
		methods: {
			initChart() {
				var linechart = document.getElementById('linechart');
				this.chart = echarts.init(linechart, 'macarons')
				this.loadMonthData()
			},
			getXList: function () {
				var list = [];
				var date = new Date();
				var i = 0;
				while (i < 30) {
					list.push(DateUtil.dateToStr("MM-dd", date));
					date = DateUtil.dateAdd('d', -1, date);
					i++;
				}
				list.reverse();
				console.log("list:", list);
				return list;
			},
			loadMonthData() {
				var x_list = this.getXList();
				Http.getModel(API.tongjiMonthData, {date_list: x_list.join()}, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						var result = json.data;

						function parseXList(x_list, y_list) {
							var result = [];
							for (var i = 0; i < x_list.length; i++) {
								result.push(getObjByDate(x_list[i], y_list));
							}
							return result;
						}

						function getObjByDate(date, y_list) {
							for (var j = 0; j < y_list.length; j++) {
								if (y_list[j].d == date) {
									return y_list[j].amount;
								}
							}
							return 0;
						}

						var chart_list = [
							{
								name: '需求数',
								type: 'line',
								data: parseXList(x_list, result.list1)
							},
							{
								name: '登记数',
								type: 'line',
								data: parseXList(x_list, result.list2)
							},
							{
								name: '录用数',
								type: 'line',
								data: parseXList(x_list, result.list3)
							},
							{
								name: '入职数',
								type: 'line',
								data: parseXList(x_list, result.list4)
							},
							{
								name: '离职数',
								type: 'line',
								data: parseXList(x_list, result.list5)
							},
							{
								name: '空缺数',
								type: 'line',
								data: parseXList(x_list, result.list6)
							},
						];

						function renderChart(dataList, myChart) {
							var option = {
								tooltip: {
									trigger: 'axis',
									axisPointer: {            // 坐标轴指示器，坐标轴触发有效
										type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
									}
								},
								legend: {
									data: ['需求数', '登记数', '录用数', '入职数', '离职数', '空缺数']
								},
								grid: {
									left: '3%',
									right: '4%',
									bottom: '3%',
									containLabel: true
								},
								xAxis: [
									{
										type: 'category',
										data: x_list
									}
								],
								yAxis: [
									{
										type: 'value'
									}
								],
								series: dataList
							};
							myChart.setOption(option);
						}

						renderChart(chart_list, this.chart);
						this.DataLoading = false
					}
				})
			},
			loadAllData() {
				Http.getModel(API.tongjiData, {}, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.dataBean = json.data
					}
				})
			},
			loadList() {
				this.listLoading = true
				Http.getModel(API.zhaoPinList, this.listQuery, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.list = json.data.list
						this.total = parseInt(json.data.total)
						this.listLoading = false
					}
				})
			},
			loadJobList(){
				Http.getModel(API.get_company_job_list, {}, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.job_list = json.data.list
					}
				})
			},
			loadDeptList() {
				Http.getModel(API.get_company_dept_list, {}, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.dept_list = json.data.list
					}
				})
			},
			/***   公用部分 start ***/
			onSelectionChange(val) {
				this.multipleSelection = val;
			},
			doSearch() {
				this.listQuery.page = 1
				if((this.listQuery.start_time&&this.listQuery.end_time)||(!this.listQuery.start_time&&!this.listQuery.end_time)){
					this.loadList()
				}else{
					Msg.error('时间信息不完整！')
				}
			},
			onSizeChange(val) {
				this.listQuery.pageSize = val
				this.loadList()
			},
			onCurrentChange(val) {
				this.listQuery.pageNumber = val
				this.loadList()
			},
			/***   公用部分 end ***/
			downloadExcel(ids){
				if (!ids) {
					if (this.multipleSelection.length == 0) {
						Msg.error("请先选择");
						return false;
					} else {
						ids = _.pluck(this.multipleSelection, "id").join(",");
					}
				}
				var DownLoadFile = function (options) {
					var config = $.extend(true, { method: 'post' }, options);
					var $iframe = $('<iframe id="down-file-iframe" />');
					var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
					$form.attr('action', config.url);
					for (var key in config.data) {
						$form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
					}
					$iframe.append($form);
					$(document.body).append($iframe);
					$form[0].submit();
					$iframe.remove();
				}
				var company = this.company;
				var data = {
					ids:ids,
					company_id:company.id
				}
				if(this.listQuery.start_time&&this.listQuery.end_time){
					data.start_time = this.listQuery.start_time
					data.end_time = this.listQuery.end_time
				}
				var params = {
					url:window.server_root+API.downZpData,
					data:data
				}
				console.log("params:",params)
				DownLoadFile(params)
			}
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .panel-group {
        margin-top: 18px;
        .card-panel-col {
            margin-bottom: 32px;
        }
        .card-panel {
            height: 108px;
            cursor: pointer;
            font-size: 12px;
            position: relative;
            overflow: hidden;
            color: #666;
            background: #fff;
            box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
            border-color: rgba(0, 0, 0, .05);
            .card-panel-text {
                text-align: center;
            }
            &:hover {
                .card-panel-icon {
                    color: #fff;
                }
                .card-panel-text {
                    color: #fff;
                }

                .icon-people {
                    background: #40c9c6;
                }
                .icon-money {
                    background: #d4237a;
                }
                .icon-morder {
                    background: #f4516c;
                }
                .icon-agent {
                    background: #0b988f
                }
            }
            .icon-people {
                color: #40c9c6;
            }
            .icon-message {
                color: #36a3f7;
            }
            .icon-money {
                color: #d4237a;
            }
            .icon-morder {
                color: #f4516c;
            }
            .icon-agent {
                color: #0b988f;
            }
            .card-panel-icon-wrapper {
                float: left;
                margin: 8px 0 0 8px;
                padding: 16px;
                transition: all 0.38s ease-out;
                border-radius: 6px;
            }
            .card-panel-icon {
                float: left;
                font-size: 48px;
            }
            .card-panel-description {
                float: right;
                font-weight: bold;
                margin: 26px;
                margin-left: 0px;
                div {
                    line-height: 18px;
                    color: rgba(0, 0, 0, 0.45);
                    font-size: 16px;
                }
                .border-bottom {
                    border-bottom: 1px dashed #aaa
                }
                .border-right {
                    border-right: 1px dashed #aaa
                }
                span {
                    display: inline-block;
                    line-height: 1.5;
                    width: 6em;
                    text-align: center;
                }
            }
        }
    }
</style>
